<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="shortcut icon" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/logo.png"/>
	<title>{{.title}}</title>
	<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.min.js"></script>
    <link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/css/mui.min.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/font/iconfont.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/other/all.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/other/app.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/other/ydui.css?v" rel="stylesheet" />
</head>
<style type="text/css">
	.g-flexview{
		padding-bottom: 50px;
		padding-top: 40px;
	}
    .scrolltab-nav{
        width:calc(25% - 4px);
    }
    .scrolltab-item.crt{
        font-size: 14px;
    }
    .scrolltab-item{
        padding: 0px 10px;
    }
    .product {padding: 0 45px;height: 40px;}
    .product .back {position: absolute;left: 0;display: inline-block;width: 40px;height: 40px;line-height: 40px;text-align: center;font-size: 18px;font-weight: 800;}
    .product a {margin-top: 5px;}
</style>
<body>
<section class="g-flexview">
    <header class="product">
        <div class="back iconfont icon-fanhui1" onclick="location = location.origin + '/mobile/index'"></div>
		<a href="/mobile/column/search">
			<i class="iconfont">&#xe626;</i>
			搜索商品
		</a>
	</header>

    <section class="g-scrollview">

        <div class="m-scrolltab" data-ydui-scrolltab>
            <div class="scrolltab-nav">
                {{range $k,$v:=.column}}
                <a href="javascript:void(0);" class="scrolltab-item {{if eq $k 0}}ac{{end}}" data-id="{{$v.id}}">{{$v.name}}</a>
                {{end}}
            </div>
            <div class="scrolltab-content">
                {{range .column_level2}}
                <div class="scrolltab-content-item">
                    <h4><a href="/mobile/column/list?id={{.id}}">{{.name}}</a></h4>
                    <ul>
                        {{range .column_level3}}
                        <li>
                            <a href="/mobile/column/list?id={{.id}}">
                                <div style="overflow: hidden;position: relative;width: 100%;padding-bottom: 100%;">
                                    <img style="position: absolute;width: 100%;top: 50%;transform: translateY(-50%);" src="{{if .pathname}}{{.pathname}}{{else}}/static/wechat/img/logo.png{{end}}" alt="">
                                </div>
                                <span>{{.name}}</span>
                            </a>
                        </li>
                        {{end}}
                    </ul>
                </div>
                {{end}}
            </div>
        </div>

    </section>

</section>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item goto" href="/mobile/index">
        <span class="mui-icon iconfont icon-home2"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item mui-active goto" href="/mobile/column">
        <span class="mui-icon iconfont icon-liebiao"></span>
        <span class="mui-tab-label">分类</span>
    </a>
    <!-- <a class="mui-tab-item" href="/mobile/active">
        <span class="mui-icon iconfont icon-tianmaohaoquan"></span>
        <span class="mui-tab-label">活动</span>
    </a> -->
    <a class="mui-tab-item goto" href="/mobile/shopcar">
        <span class="mui-icon iconfont icon-gouwucheman"></span>
        <span class="mui-tab-label">购物车</span>
    </a>
    <a class="mui-tab-item goto" href="/mobile/my">
		<span class="mui-icon iconfont icon-kefuyouxian"></span>
		<span class="mui-tab-label">我的</span>
	</a>
</nav>
</body>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/zepto.min.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/js/SUI.js"></script>
{{template "wechat/public/share.html" .}}
<script>
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
    //释放 nav 底部导航 a 链接
    mui('.mui-tab-item').each(function () {
        this.addEventListener('tap',function () {
            var url = this.getAttribute('href');
            window.location.href=url;
        })
    });
    $('.scrolltab-item').click(function(){
        var cls=$(this).attr('class')
        if(cls=="scrolltab-item "){
            $('.ac').attr('class','scrolltab-item ')
            $(this).attr('class','scrolltab-item ac')
            var id=$(this).attr('data-id')
            $.ajax({
                url:window.location.href,
                type:'post',
                data:{id:id},
                success:function(res){
                    var html=''
                    if(res){
                        for(var i=0;i<res.length;i++){
                            html+=`<div class="scrolltab-content-item">
                                        <h4><a href="/mobile/column/list?id=`+res[i].id+`">`+res[i].name+`</a></h4>
                                        <ul>`
                                if(res[i].column_level3){
                                    for (var j=0;j<res[i].column_level3.length;j++){
                                        html+=`<li>
                                            <a href="/mobile/column/list?id=`+res[i].column_level3[j].id+`">
                                                <div style="overflow: hidden;position: relative;width: 100%;padding-bottom: 100%;">`
                                            var pathname=''
                                            if(res[i].column_level3[j].pathname){
                                                pathname=res[i].column_level3[j].pathname
                                            }else{
                                                pathname=`/static/wechat/img/logo.png`
                                            }
                                        html+=`         <img style="position: absolute;width: 100%;top: 50%;transform: translateY(-50%);" src="`+pathname+`" alt="">
                                                    </div>
                                                <span>`+res[i].column_level3[j].name+`</span>
                                            </a>
                                        </li>`
                                    }
                                }
                            html+=`</ul></div>`
                        }
                    }
                    $('.scrolltab-content').html(html)
                }
            })
        }
    })
    window.onunload = function () {
        sessionStorage.setItem('column-index', $('.scrolltab-item.ac').index())
        sessionStorage.setItem('column-top', $('.scrolltab-content')[0].scrollTop)
    }
    window.onload = function () {
        var top = sessionStorage.getItem('column-top')
        if (top === null) {
            return    
        }
        var index = sessionStorage.getItem('column-index')
        $('.scrolltab-item')[index].click()
        $('.scrolltab-content')[0].scrollTop = top
    }
</script>
</html>